<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
   $("#svgmap").svg({loadURL: 'map.svg'});
   if (location.hash.length > 0) {
      var hash = decodeURI(location.hash).replace('#', '');
      $("#book_id").attr("value", hash);
      lookup_book();
   }
}
);
</script>

<div id="ui">
Book ID:<input type="text" id="book_id">
<input type="button" id="lookup" value="Lookup">
</div>

<div id="map" style="background-color:yellow;">
</div>

<div id="svgmap" style="width:540px; height:300px;">

</div>

<div id="info">
</div>
<script>
var old_style, old_id="undefined", old_floor; 
var current = "map2.svg";

function lookup_book() {
  // book_id is just whatever the user enters. note that the value to be 
  // retrieved is an attribute, hence we call the .attr() function.
  var book_id = $("#book_id").attr("value");
  if (book_id.length == 0) {
      alert("Please enter the book ID to lookup.");
      return;
  }
  // Clear the text for the map div.
  $("#map").text("");
  // clear the info div.
  $("#info").text("");
  var url = "book_location.php?id=" + book_id;
  $("#info").append("Issuing AJAX GET request to url: " + url + "<br>");

  // Perform an AJAX request to the given url. This will load the XML output
  // by the php script, and will call parseXml once the GET request finished.
  $.ajax({
    type: "GET",
    url: url,
    dataType: "xml",
    success: parseXml
  });
}

$("#lookup").click(lookup_book);

function doneLoading() {
   var loc = window.loc;
   $("#map").text("Location is " + loc);
   //$('#' + $(xml).find("location").text()).attr("fill", "blue");
   $('#' + loc + " > polygon").each(function() {$(this).attr("style","fill:blue")} );
}

function parseXml(xml) {
   $("#info").append("Finished loading AJAX XML.<br>");
   
   // the xml variable now contains a full DOM based on the XML retrieved
   // from the server. The normal jquery functions work on it.
   var error = $(xml).find("error").text(); // text() gives the inside text of a tag
   if (error != 0) {
      alert("Error encountered: " + $(xml).find("message").text());
      return;
   }
   var loc = $(xml).find("location").text();
   var floor = $(xml).find("floor").text(); //which floor
   if (old_id != "undefined") {
      $('#' + old_id + " > polygon").each(function() { $(this).attr("style", ""); });
   }
   old_id = loc;
   old_floor = floor;
   window.loc = loc;

   // load the correct map (retrieve the floor number)
  // var current_floor = $('#svgmap').attr("url");
  // current_map = strreplace("map", "", current_map);
   if (old_floor != current) {
      $("#svgmap").remove();
      $("#map").after('<div id="svgmap" style="width:540px; height:300px;"></div>');
      current_map = "map" + old_floor + ".svg";
      $("#svgmap").svg({loadURL: current_map, onLoad: doneLoading});
   } else {
      doneLoading();
   }   
}
</script>
